<template>
  <div class="left-container">
    <div style="margin-bottom: 10px" v-px-to-vw>年级人数</div>
    <div class="flex">
      <div class="person">
        <div style="margin-bottom: 4px" v-px-to-vw>高一人数</div>
        <div>
          <!-- <span style="border-color: #00fff0">1</span><span style="border-color: #00fff0">0</span><span style="border-color: #00fff0">0</span> -->
          <span v-for="(digit, idx) in splitNumber(ref_grade_stu_statistics.find(item => item.gradename == '高一')?.stucount)" :key="idx" style="border-color: #00fff0">
            {{ digit }}
          </span>人
        </div>
      </div>
      <div class="person" style="color: #00ffb2">
        <div style="margin-bottom: 4px" v-px-to-vw>高二人数</div>
        <div>
          <!-- <span style="border-color: #00ffb2">1</span><span style="border-color: #00ffb2">0</span><span style="border-color: #00ffb2">0</span> -->
          <span v-for="(digit, idx) in splitNumber(ref_grade_stu_statistics.find(item => item.gradename == '高二')?.stucount)" :key="idx" style="border-color: #00ffb2">
            {{ digit }}
          </span>人
        </div>
      </div>
      <div class="person" style="color: #fff509">
        <div style="margin-bottom: 4px" v-px-to-vw>高三人数</div>
        <div>
          <!-- <span style="border-color: #fff509">1</span><span style="border-color: #fff509">0</span><span style="border-color: #fff509">0</span> -->
          <span v-for="(digit, idx) in splitNumber(ref_grade_stu_statistics.find(item => item.gradename == '高三')?.stucount)" :key="idx" style="border-color: #fff509">
            {{ digit }}
          </span>人
         </div>
      </div>
    </div>
    <div style="margin: 10px 0" v-px-to-vw>教师考勤</div>
    <div class="flex" style="height: 25%; flex-grow: 1; flex-shrink: 1">
      <div ref="pieChartRefA" class="chart-container" style="flex: 1"></div>
      <div style="flex: 1; display: flex; flex-direction: column; justify-content: center">
        <div style="font-size: 20px; color: #00fff0;  margin-bottom: 8px; margin-left: 20%" v-px-to-vw>50%</div>
        <el-progress :percentage="50" color="#00FFB2" :show-text="false" style="width: 100%;" />
        <div class="flex align-center legend" style="background: none; border: none; margin-top: 8px;" v-px-to-vw>
          <div class="legend-dot"></div>
            考勤出勤率
        </div>
      </div>
    </div>
    <div style="margin: 10px 0" v-px-to-vw>特色发展</div>
    <div class="flex align-center" style="height: 25%; flex-grow: 1; flex-shrink: 1">
      <div ref="pieChartRef" class="chart-container" style="flex: 3"></div>
      <div style="flex: 2; margin-right: 10px" v-px-to-vw>
        <div v-for="(item, index) in pieDataRight" :key="index" class="legend flex justify-between">
          <div>
            <div class="legend-dot"></div>
            {{ item }}
          </div>
        </div>
      </div>
    </div>
    <div style="margin: 10px 0" v-px-to-vw>学习情况</div>
    <div style="position: relative; height: 25%; flex-grow: 1; flex-shrink: 1">
      <div ref="barChartRef" class="chart-container"></div>
      <select v-model="selectedType" class="custom-select" style="width: 80px; position: absolute; top: 0; right: 10px" v-px-to-vw>
        <option v-for="item in typeOptions" :key="item.value" :value="item.value">
          {{ item.label }}
        </option>
      </select>
    </div>
  </div>
</template>

<script setup>
import { nextTick, onMounted, ref,onUnmounted } from "vue";
import * as echarts from "echarts";
const typeOptions = ref([{ label: "总分", value: "1" }]);
const selectedType = ref("1");
import * as leaderApi from '@/api/leaders'

const ref_grade_stu_statistics = ref([]);
// 年级人数统计
const grade_stu_statistics = async () => {
    leaderApi.grade_stu_statistics().then(res => {
        ref_grade_stu_statistics.value = res.data;
    });
}

const splitNumber = (num) => {
  if(num)
  {
    return num.toString().split('');
  }
  return [];
};

// 学习情况
const grade_score = async () => {
    leaderApi.grade_score().then(res => {
        initChartE(res);
    });
}


onMounted(() => {
  nextTick(() => {
    initChartA();
    initChartB();
    //initChartE();
    grade_stu_statistics();
    grade_score();
    refreshDataInterval();
  })

});
const pieDataRight = ["实中演说家", "元旦文艺汇演", "元旦文艺汇演"];
const pieData = [
  {
    name: "特色活动",
    value: 20,
  },
  {
    name: "特色学科",
    value: 10,
  },
  {
    name: "特色项目",
    value: 10,
  },
];
const icon =
  "";
let pieChartRef = ref(null);
let pieChart = ref(null);
const initChartB = () => {
  pieChart.value = echarts.init(pieChartRef.value);
  pieChart.value.setOption({
    color: ["#00ffb2", "#fff509", "#00c1ff", "#00fff1"],
    graphic: {
      elements: [
        {
          type: "image",
          style: {
            image: icon,
            width: 38,
            height: 34,
          },
          left: "37%",
          top: "center",
        },
      ],
    },
    legend: {
      show: false,
    },
    series: [
      {
        type: "pie",
        radius: ["55%", "75%"],
        center: ["45%", "50%"],
        label: {
          formatter: "{a|{b}}",
          position: "outside",
          alignTo: "labelLine",
          distanceToLabelLine: -20,
          padding: [0, 0, 15, 0],
          rich: {
            a: {
              color: "inherit",
              fontSize: 12,
            },
          },
        },
        data: pieData,
      },
    ],
  });
};
const iconA =
  "";
let pieChartRefA = ref(null);
let pieChartA = ref(null);
const initChartA = () => {
  pieChartA.value = echarts.init(pieChartRefA.value);
  pieChartA.value.setOption({
    color: ["#00ffb2", "#fff509", "#00c1ff", "#00fff1"],
    graphic: {
      elements: [
        {
          type: "image",
          style: {
            image: iconA,
            width: 46,
            height: 32,
          },
          left: "center",
          top: "center",
        },
      ],
    },
    legend: {
      show: false,
    },
    series: [
      {
        type: "pie",
        startAngle: 180,
        endAngle: -180,
        radius: ["50%", "70%"],
        center: ["50%", "51%"],
        label: {
          show: false,
          position: 'outside',
          formatter: '{b} \n{c}%',
          color: '#fff',
          fontSize: 12,
          // distanceToLabelLine: 5,
        },
        labelLine: {
          show: true,
          length: 15,
          length2: 10,
          smooth: true,
        },
        data: [
          {
            value: 50,
            name: "考勤出勤率",
          },
          {
            value: 50,
            name: "考勤出勤率",
            itemStyle: {
              normal: {
                color: "#fefefe",
              },
            },
          },
        ],
      },
    ],
  });
};
let barChartRef = ref(null);
let barChart = ref(null);
const colorList = ["#00FFF0", "#00FFB2", "#faff0d"];
const initChartE = (resData) => {
  console.log(resData);
  if (barChartRef.value) {
    const existingChart = echarts.getInstanceByDom(barChartRef.value);
    if (existingChart) existingChart.dispose();
  }
  var xdata = resData.data.map(item => item.grade)
  var maxScroe = resData.data.map(item => item.max_score)
  var avgScroe = resData.data.map(item => item.avg_score)
  const option = {
    color: colorList,
    legend: {
      data: ["最高分", "平均分"],
      top: 0,
      textStyle: {
        fontSize: 12,
        color: function (params) {
          return params.color;
        },
      },
    },
    grid: {
      top: 40,
      right: 60,
      bottom: 0,
      left: 10,
      containLabel: true,
    },
    tooltip: {},
    xAxis: {
      data: xdata,
      axisLine: {
        lineStyle: {
          color: "#0094ff", // ✅ X轴线颜色
        },
      },
      axisTick: {
        lineStyle: {
          color: "#0094ff", // ✅ X轴刻度线颜色
        },
      },
      axisLabel: {
        color: "#fff",
      },
    },
    yAxis: {
      type: "value",
      axisLine: {
        lineStyle: {
          color: "#00D1FF",
        },
      },
      splitLine: {
        lineStyle: {
          color: "#0094ff",
        },
      },
      axisLabel: {
        show: true,
      },
    },
    series: [
      {
        name: "最高分",
        type: "bar",
        barWidth: 14,
        data: maxScroe,
        label: {
          show: false,
          position: "top",
          formatter: "{c}",
        },
      },
      {
        name: "平均分",
        type: "bar",
        barWidth: 14,
        data: avgScroe,
        label: {
          show: false,
          position: "top",
          formatter: "{c}",
        }
      },
    ],
  };
  barChart.value = echarts.init(barChartRef.value);
  barChart.value.setOption(option);
};

onUnmounted(() => { 
  if(ref_setInterval.value)
  {
    clearInterval(ref_setInterval.value);
    ref_setInterval.value = null;
  }
})

const ref_setInterval = ref(null);
const refreshDataInterval = () => { 
  if (import.meta.env.VITE_API_REFRESH_IsEnable == 0) {
    ref_setInterval.value = setInterval(() => {
        console.log('刷新数据');
        
        grade_stu_statistics();
        grade_score();
    }, import.meta.env.VITE_API_REFRESH_INTERVAL);
  }
}


</script>

<style lang="scss" scoped>
.chart-container {
  width: 100%;
  height: 100%;
}
.left-container {
  width: 480px;
  height: calc(100% - 10px);
  color: #00ffff;
  margin-top: 10px;
  background-image: url("@/assets/images/profile/CenterBack3x.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.person {
  font-size: 16px;
  color: #00fff0;
  margin: 10px 0;
  flex: 1;
  span {
    font-size: 26px;
    line-height: 43px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0);
    margin-right: 4px;
    border: 1px solid rgba(0, 255, 240, 1);
    padding: 0 8px;
  }
}
.legend {
  color: #fff;
  border: 1px solid #00ffff;
  background: rgba(0, 255, 255, 0.2);
  padding: 6px 10px;
  border-radius: 10px;
  margin: 4px 0;
  font-size: 12px;
}
.legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
  background: #46deff;
}
</style>
